<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="css/index.css">
		<title>背景资源管理</title>
	</head>
	<body>
		<div id="con">
			<video id="slider" src="img/1.mp4" autoplay="autopaly" loop="loop" muted="muted"></video>
			<ul class="navigation">
				<li onclick="vidioUrl('1.mp4')">
					<img src="img/1.png" alt="">
				</li>
				<li onclick="vidioUrl('2.mp4')">
					<img src="img/2.png" alt="">
				</li>
				<li onclick="vidioUrl('3.mp4')">
					<img src="img/3.png" alt="">
				</li>
				<li onclick="vidioUrl('4.mp4')">
					<img src="img/4.png" alt="">
				</li>
				<li onclick="vidioUrl('5.mp4')">
					<img src="img/5.png" alt="">
				</li>
			</ul>
		</div>
		<script>
			function vidioUrl(url){
				document.getElementById('slider').src='img/' + url;
			}
		</script>
	</body>
</html>
